<template>
    <el-dialog
        top="5vh"
        :title="title"
        custom-class="dialog-browsw-custom"
        @opened="handleOpenedDialog"
        :visible.sync="diglogConf.dialogVisible">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="新增明细" name="1">
                <vxe-table
                    height="210px"
                    show-overflow
                    stripe
                    ref="insertTable"
                    :data="diglogConf.insertRecords">
                </vxe-table>
            </el-collapse-item>
            <el-collapse-item name="2">
                <template slot="title">
                  修改明细 <div style="font-size:12px">--黄色部分为改动内容</div>
                </template>
                <vxe-table
                    :cell-style="cellStyle"
                    height="210px"
                    show-overflow
                    stripe
                    ref="updateTable"
                    :data="diglogConf.updateRecords">
                </vxe-table>
            </el-collapse-item>
            <el-collapse-item title="删除明细" name="3">
                <vxe-table
                    height="210px"
                    show-overflow
                    stripe
                    ref="removeTable"
                    :data="diglogConf.removeRecords">
                </vxe-table>
            </el-collapse-item>
            </el-collapse>
    </el-dialog>
</template>

<script>
export default {
  name: 'dialog-browse',
  props: {
    primaryKey: {
      type: String,
      default: 'id'
    },
    diglogConf: {
      type: Object,
      default: function () {
        return {
          dialogVisible: false,
          columns: [],
          insertRecords: [],
          removeRecords: [],
          updateRecords: [],
          updateFields: []
        }
      }
    }
  },
  data () {
    return {
      title: '操作记录',
      activeNames: ['1', '2', '3']
    }
  },
  methods: {
    handleChange (val) {
      // console.log(val)
    },
    handleOpenedDialog () {
      let columns = this.diglogConf.columns
      if (columns && columns.length) {
        columns = columns.filter(f => f.type !== 'checkbox')
        this.$refs.insertTable.loadColumn(columns)
        this.$refs.updateTable.loadColumn(columns)
        this.$refs.removeTable.loadColumn(columns)
      }
    },
    cellStyle ({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) {
      var _row = this.diglogConf.updateFields[rowIndex]
      if (_row[column.property]) {
        return {
          'background-color': 'yellow'
        }
      }
    }
  }
}
</script>

<style lang="scss">
    .dialog-browsw-custom {
        .el-dialog__header{
          padding:10px 20px 0px;
        }
        .el-dialog__body{
          padding:10px 20px;
        }
    }

    .dialog-browsw-custom .el-collapse{
        .el-collapse-item{
          .el-collapse-item__header{
            height: 38px;
            line-height: 38px;
          }
          .el-collapse-item__content{
            padding-bottom: 0px;
          }
        }
    }
    .cell-highlight{
      background-color: yellow;
    }
</style>
